import Card from '@/components/Card';
import Tabs, { TabsProps } from '@/components/Tabs';
import DeviceTree from '@/pages/SiteMonitor/HisCurve/components/DeviceTree';
import RawData from '@/pages/SiteMonitor/HisCurve/components/RawData';
import SumData from '@/pages/SiteMonitor/HisCurve/components/SumData';
import { historyCurveControllerDataColumnList } from '@/services/ess/historicalCurve';
import { useIntl } from '@umijs/max';
import { message, Modal, Select } from 'antd';
import React, { useState } from 'react';
import Styles from './index.less';

const tabMap = new Map<string, boolean>([
  ['1', false],
  ['2', true],
]);
/**
 * 历史曲线
 * @constructor
 */
const HisCurve: React.FC = () => {
  const intl = useIntl();
  const [isShowModal, setIsShowModal] = useState(false);
  const [transferData, setTransferData] = useState();
  const [selectedTabs, setSelectedTabs] = useState('1');
  const [targetKeys, setTargetKeys] = useState([]);
  const [tagList, setTagList] = useState([]);
  const reset = () => {
    setTagList([]);
  };
  const Items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'hisCurve.rawData' }),
      children: <RawData tagList={tagList} reset={reset}></RawData>,
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'hisCurve.sumData' }),
      children: <SumData tagList={tagList} reset={reset}></SumData>,
    },
  ];
  const changeNodes = (e: any) => {
    setTargetKeys([]);
    const params = {
      areaId: e?.areaId,
      deviceType: e?.deviceType,
      deviceCode: e?.deviceCode,
      nodeType: e?.nodeType,
      stat: tabMap.get(selectedTabs),
    };
    historyCurveControllerDataColumnList(params).then((res) => {
      if (res.data && res.data.length) {
        const formatterData = res.data.map((item) => {
          return {
            ...item,
            key: JSON.stringify({
              ...item,
              nodeType: e?.nodeType,
              uniqueId:
                item.areaName + '' + item.deviceName + '' + item.dataAttr + '' + item.dataName,
            }),
          };
        });
        setIsShowModal(true);
        setTransferData(formatterData);
      } else {
        message.error(intl.formatMessage({ id: 'hisCurve.noDevices' }));
        setTransferData([]);
      }
    });
  };

  return (
    <>
      <div className={Styles.hisCurve}>
        <div className={Styles.hisCurveLeft}>
          <DeviceTree changeNodes={changeNodes}></DeviceTree>
        </div>
        <div className={Styles.hisCurveRight}>
          <Card
            title={intl.formatMessage({ id: 'hisCurve.name' })}
            style={{ width: '100%', height: '100%' }}
            hasHeaderBorder={true}
            styles={{
              body: {
                paddingLeft: 0,
                paddingTop: 1,
              },
              title: { fontSize: 21 },
            }}
          >
            <Tabs
              items={Items}
              style={{ padding: 0 }}
              activeKey={selectedTabs}
              onChange={(e: string) => {
                setSelectedTabs(e);
                setTagList([]);
              }}
            ></Tabs>
          </Card>
        </div>
        <Modal
          styles={{
            footer: {
              textAlign: 'center',
            },
          }}
          open={isShowModal}
          title={intl.formatMessage({ id: 'hisCurve.dataItem' })}
          onCancel={() => {
            setIsShowModal(false);
          }}
          onOk={() => {
            if (targetKeys.length > 0) {
              setTagList(targetKeys);
            }
            setIsShowModal(false);
          }}
          destroyOnClose={true}
          width={440}
        >
          <div>
            <Select
              maxTagCount={'responsive'}
              value={targetKeys}
              style={{ width: 400 }}
              mode={'multiple'}
              options={transferData}
              fieldNames={{
                value: 'key',
                label: 'dataName',
              }}
              onChange={(value) => {
                setTargetKeys(value);
              }}
            ></Select>
            {/*<Transfer*/}
            {/*  listStyle={{*/}
            {/*    width: 600,*/}
            {/*    height: 400,*/}
            {/*  }}*/}
            {/*  selectedKeys={selectedKeys}*/}
            {/*  targetKeys={targetKeys}*/}
            {/*  onChange={onChange}*/}
            {/*  onSelectChange={onSelectChange}*/}
            {/*  dataSource={transferData}*/}
            {/*  render={(item) => item.dataName}*/}
            {/*></Transfer>*/}
          </div>
        </Modal>
      </div>
    </>
  );
};
export default HisCurve;
